17. Debugging CSS Part 2

In part 1, you used vertical-align: top to align the siblings with the top of the parent and fix the layout. While this fixes the problem, it doesn't explain why there is the small gap between the relative div and its siblings. So why is it there?

This is a crazy problem and the answer isn't simple. I want you to do your best but don't get disheartened if you're stumped. It's okay if you just want to skip ahead to my walkthrough. I ran into this situation on accident when I was preparing part 1 of this quiz and it took me some time to uncover everything that's happening. Think of this as a bonus challenge.

Frankly, this is a very strange situation. But CSS has a lot of these, so you should get some experience debugging one now. Here's how I want you to tackle this problem:

1. Prepare and do some background reading! No one remembers everything about CSS. We all refer to documentation, guides and references constantly.
   • Read this quick chapter on Box Positioning in CSS from Learn CSS Layout, an amazing online book about the details of CSS by Mikito Takada. I specifically recommend the section on inline formatting.
2. Break down the system. Here are questions to consider:
   • What are the display properties of the elements and how do they affect layout?
   • In what order do the steps of layout happen?
   • How do the children affect each other?
   • How do the containers affect their children? How do the children affect their containers?
   • How are the elements currently aligned? In what direction are they aligned? What property/properties could affect the alignment?
   • Consider these CSS properties:
   • display
   • position
   • text-align
   • vertical-align
3. Try things out! Test your ideas quickly with developer tools.
   • Make a hypothesis about an idea.
   • Test your idea.
   • Assess whether or not it worked.
   • If it didn't work, integrate what you learned into a new hypothesis and test a new idea!